<template>
  <div ref="el" isFullscreen style="background: #fff">
    <el-button type="primary" @click="toggle">全屏显示</el-button>
    <p>x: {{ x }}, y: {{ y }}</p>
    <el-button type="primary" @click="toggleDark">开启暗黑模式</el-button>
  </div>
</template>

<script setup lang="ts">
import { useMouse, debounceFilter, useFullscreen, useDark, useToggle } from '@vueuse/core'
import { ref, watch } from 'vue'

const { x, y } = useMouse({ eventFilter: debounceFilter(100) })

const el = ref<HTMLElement | null>(null)
const { isFullscreen, toggle } = useFullscreen(el)
watch(isFullscreen, (val) => {
  console.log(val)
})

const isDark = useDark({
  selector: 'body',
  valueDark: 'dark',
  valueLight: 'light'
})
const toggleDark = useToggle(isDark)
</script>

<style scoped>

</style>